<template>
  <el-row class="custom-tree-node">
    <el-col :span="20">
      <span>{{ treeNode.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <el-col>{{ treeNode.manager }}</el-col>
        <el-col>
          <el-dropdown @command="operateDepts">
            <!-- 下拉菜单文字 -->
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <!-- 下拉项 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="edit">编辑子部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="del">删除子部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>

</template>

<script>
import { delDepartmentsAPI } from '@/api/index'
export default {
	name: 'TreeTools',
	props: {
		treeNode: {
			type: Object,
			required: true
		},
		isRoot: {
			type: Boolean,
			default: false
		}
	},

	methods: {
	async	operateDepts(type) {
			if (type === 'add') {
				// 添加部门
				// this.treeNode:当前被点击的部门项
				this.$emit('addDeptsList', this.treeNode)

			} else if (type === 'edit') {
				// 修改部门
				// 点击修改部门的时候，同样是跳出“新增部门”的弹出层
				this.$emit('editDeptsList', this.treeNode)

			} else {
				// 删除部门
				// this.$confirm(),elementUI自带的，提示用户确认删除/取消的提示框
				this.$confirm('您确定要删除当前部门吗？').then(() => {

					return delDepartmentsAPI(this.treeNode.id)
				}).then(() => {
					this.$emit('updataList')
					this.$message.success('删除成功')
				})
				}
			}
		}
	}
</script>

<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
		margin: 5px 0;
  }
</style>